import React from 'react';
import {Nav,NavItem,Navbar,NavDropdown,MenuItem} from 'react-bootstrap';

import './Header.css'

var Header = React.createClass({
	render:function() {
		return (
			<header className = "header">
				<NavSignNone />
			</header>		
		);
	}
});

var NavSignSuccess = React.createClass({
	render:function() {
		return (
			<div className = "navSignSuccess">
				  <Navbar>
				    <Navbar.Header>
				      <Navbar.Brand>
				        <a href="#">React-Bootstrap</a>
				      </Navbar.Brand>
				    </Navbar.Header>
				    <Nav>
				      <NavItem eventKey={1} href="#">Link</NavItem>
				      <NavItem eventKey={2} href="#">Link</NavItem>
				      <NavDropdown eventKey={3} title="userName" id="basic-nav-dropdown">
				        <MenuItem eventKey={3.1}>My Account</MenuItem>
				        <MenuItem eventKey={3.1}>My Collection</MenuItem>
				        <MenuItem eventKey={3.2}>My Message</MenuItem>
				        <MenuItem eventKey={3.3}>Exit</MenuItem>
				        <MenuItem divider />
				        <MenuItem eventKey={3.3}>Separated link</MenuItem>
				      </NavDropdown>
				    </Nav>
				  </Navbar>
			</div>
		);
	}
});

var NavSignNone = React.createClass({
	render:function() {
		return (
			<div className = "navSignSuccess">
				  <Navbar>
				    <Navbar.Header>
				      <Navbar.Brand>
				        <a href="#">React-Bootstrap</a>
				      </Navbar.Brand>
				    </Navbar.Header>
				    <Nav>
				      <NavItem eventKey={1} href="#">Link</NavItem>
				      <NavItem eventKey={2} href="#">Link</NavItem>
				      <NavItem eventKey={3} href="#">Sign In</NavItem>
				      <NavItem eventKey={4} href="#">Sign Up</NavItem>
				    </Nav>
				  </Navbar>
			</div>
		);
	}
});



module.exports = Header;